<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>题目</title>
  <link rel="icon" href="../image/logo.ico" type="image/x-icon">
  <link href="../plugs/layui/dist/css/layui.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../css/jquery.snippet.css">
  <script type="text/javascript" src="../js/jquery.snippet.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../js/layer.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
  <script type="text/javascript" src="../js/head-nav.js"></script>


</head>

<style>
  #title {
    color: #000;
    margin-left: 14px;
  }

  .t1 {
    margin-left: 16px;
    margin-top: 10px;
  }

  .desc {
    padding: 10px;
  }

  .example {
    box-shadow: 0px 0px 10px #c3c3c3;
    border-radius: 10px;
    border: none;
    margin-left: 10px;
    margin-bottom: 20px;
    padding: 10px;
  }

  .content1 {
    box-shadow: 0px 0px 10px #c3c3c3;
    background-color: rgb(245, 245, 245);
    border-radius: 10px;
    border: none;
    margin-left: 10px;
    padding: 10px;
  }

  .example p {
    text-indent: 14px;
  }

  .example li {
    text-indent: 14px;
  }

  .foot1 {
    margin-top: 20px;
    font-size: 12px;
    text-indent: 12px;
  }

  .submit {
    margin-top: 10px;

  }

  .title1 {
    margin: 10px;
  }
</style>


<body>
  <div class="layui-row" id="problemLeft">
    <div class="layui-col-xs6">
      <div class="grid-demo grid-demo-bg1">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
          <legend>题目</legend>
        </fieldset>

        <div class="layui-tab">
          <ul class="layui-tab-title">
            <li class="layui-this">题目描述</li>
            <li>评论</li>
            <li>题解</li>
            <li>提交记录</li>
          </ul>
          <div class="layui-tab-content" id="problemLeft">
            <div class="layui-tab-item layui-show">
              <h4 id="title">{{id}}&nbsp;{{pname}}{{tname}}</h4>
              <div class="layui-row t1">
                <div class="layui-col-md2"><i class="layui-icon  layui-icon-more-vertical"
                    style="font-size: 20px; color: #c3c3c3;line-height: 26px;"></i>难度
                  <span v-if="difficulty = 0">简单</span>
                  <span v-else-if="difficulty = 1">中等</span>
                  <span v-else-if="difficulty = 2">困难</span>
                </div>
                <div class="layui-col-md2"><i class="layui-icon   layui-icon-praise"
                    style="font-size: 20px; color: #c3c3c3;line-height: 26px;"></i>点赞{{good}}</div>
                <div class="layui-col-md2"> <i class="layui-icon  layui-icon-star-fill"
                    style="font-size: 20px; color: #c3c3c3;line-height: 26px;"></i>收藏</div>
                <div class="layui-col-md2"><i class="layui-icon  layui-icon-cols"
                    style="font-size: 20px; color: #c3c3c3;line-height: 26px;"></i>分享</div>
                <div class="layui-col-md2"><i class="layui-icon layui-icon-share"
                    style="font-size: 20px; color: #c3c3c3;line-height: 26px;"></i>反馈</div>
              </div>
              <hr>
              <div class="desc">
                <p>描述：{{description}}
                </p>
              </div>



              <div class="example">
                <h5>示例1</h5>
                <p>{{examples}}</p>
                <p> 输出："this is a sentence"</p>
                <p> 解释：总共有 9 个空格和 4 个单词。可以将 9 个空格平均分配到相邻单词之间，相邻单词间空格数为：9 / (4-1) = 3 个。</p>
              </div>

              <div class="example">
                <h5>提示</h5>
                <ul>
                  <li> text {{hint}}</li>
                  <li>text {{hint}}</li>
                  <li>text {{hint}}</li>
                </ul>
              </div>
              <div class="layui-row foot1">
                <div class="layui-col-md2">通过次数31,114</div>
                <div class="layui-col-md2">提交次数66,592</div>
              </div>
            </div>


            <div class="layui-tab-item">
              <h3 style="margin:0 0 10px 10px;">336条评论></h3>
              <div class="example">
                <textarea name="" required lay-verify="required" placeholder="说点什么" class="layui-textarea"></textarea>
                <div class=" layui-row">
                  <div class=" layui-col-md-offset11"><button class="layui-btn submit ">提交</button></div>
                </div>
              </div>

              <h3 style="text-align:center;">精选评论</h3>
              <hr class="layui-border-green">
              <div class="person">
                <div class="title1"><img src="../image/headimg.jpg" style="width: 30px;height:30px;line-height:40px">
                  sql</div>
                <p class="content1">所谓py所见略同</p>
                <textarea name="" required lay-verify="required" placeholder="说点什么" class="content1 layui-textarea"
                  style="height: 200px;width:99%;margin-top:10px;">class Solution:
                    def reorderSpaces(self, text: str) -> str:
                        cnt=text.count(" ")
                        n = text.split()
                        if len(n)==1:
                            return text.strip()+cnt*" "
                        space,last = divmod(cnt,len(n)-1)
                        return (" "*space).join(n)+" "*last</textarea>
                <div class="layui-row t1">
                  <div class="layui-col-md1"><i class="layui-icon  layui-icon-tread"
                      style="font-size: 20px; color: #c3c3c3;line-height: 12px;"></i>踩</div>
                  <div class="layui-col-md1"><i class="layui-icon   layui-icon-praise"
                      style="font-size: 20px; color: #c3c3c3;line-height: 12px;"></i>点赞</div>
                  <div class="layui-col-md1"> <i class="layui-icon  layui-icon-dialogue"
                      style="font-size: 20px; color: #c3c3c3;line-height: 12px;"></i>回复</div>
                  <div class="layui-col-md2"><i class="layui-icon layui-icon-group" "
                        style=" font-size: 20px; color: #c3c3c3;line-height: 12px;"></i>查看回复</div>
                </div>
              </div>
            </div>
            <div class="layui-tab-item">
              <div class="layui-card">
                <div class="layui-card-header">正确题解</div>
                <div class="layui-card-body">
                  <textarea name="" required lay-verify="required" placeholder="说点什么" class="content1 layui-textarea"
                    style="height: 200px;width:99%;margin-top:10px;">
                  class Solution:
                  def reorderSpaces(self, text: str) -> str:
                      words = text.split()
                      space = text.count(' ')
                      if len(words) == 1:
                          return words[0] + ' ' * space
                      per_space, rest_space = divmod(space, len(words) - 1)
                      return (' ' * per_space).join(words) + ' ' * rest_space
                      </textarea>
                </div>
              </div>
            </div>
            <div class="layui-tab-item">

              <div class="layui-card">
                <div class="layui-card-header">提交记录</div>
                <div class="layui-card-body">
                  <textarea name="" required lay-verify="required" placeholder="说点什么" class="content1 layui-textarea"
                    style="height: 200px;width:99%;margin-top:10px;">
                  class Solution:
                  def reorderSpaces(self, text: str) -> str:
                      words = text.split()
                      space = text.count(' ')
                      if len(words) == 1:
                          return words[0] + ' ' * space
                      per_space, rest_space = divmod(space, len(words) - 1)
                      return (' ' * per_space).join(words) + ' ' * rest_space
                      </textarea>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="layui-col-xs6" id="text">
      <!-- <textarea id="demo" style="display: none;"></textarea> -->
      <!-- <iframe align="center" class="layui-col-xs12" height="350px" src="../onlineEditor/docs/index.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
      <button class="layui-col-xs3" onclick="ttj()">提交</button> -->
      <select name="modules" id="language" lay-search>
        <option value="Java" selected="true">Java</option>
        <option value="C">C</option>
        <option value="C++">C++</option>
        <option value="Python">Python</option>
        <!-- <option v-for="li in list" :value="li.name" :selected="li.selected" id="tname">{{li.name}}</option> -->
      </select>
      <form role="form">
        <div class="form-group" style="padding: 20px">
          <label for="name">编码区</label>
          <textarea id="inputArea" class="form-control" rows="15">public class Main
                {
                    public static void main(String[] args){
                        System.out.println("hello world!");
                }
            }
            </textarea>
        </div>
        <div style="padding: 20px">
          <label class="form-inline" style="padding-right: 60px;padding-left: 150px;">
            <!-- <input type="checkbox" id="timeLimitCheckBox" value="timeLimit" onclick="timeLimitClick()"> 限时 -->
            <h5>时间限制</h5>
            <p type="text" id="timeLimitInput" style="display: show" class="form-control">{{timeLimit}}</p>
          </label>

          <label class="form-inline" style="padding-right: 60px;">
            <!-- <input type="checkbox" id="argsCheckBox" onclick="argsCheckBoxClick()"> 输入参数 -->
            <h5>空间限制</h5>
            <p type="text" id="memoryLimitInput" style="display: show" class="form-control">{{memoryLimit}}</p>
          </label>
          <label class="form-inline" style="padding-right: 60px;">
            <!-- <input type="checkbox" id="argsCheckBox" onclick="argsCheckBoxClick()"> 输入参数 -->
            <h5>栈空间限制</h5>
            <p type="text" id="stackLimitInput" style="display: show" class="form-control">{{stackLimit}}</p>
          </label>
        </div>

        <button onclick="doSubmit()" type="button" style="width: 200px" class="btn btn-success center-block"
          aria-hidden="true">代码检测
        </button>
        <br><br>
        <button onclick="evaluating()" type="button" style="width: 200px" class="btn btn-success center-block"
          aria-hidden="true">在线运行
        </button>
        <br><br>
        <button onclick="run()" type="button" style="width: 200px" class="btn btn-success center-block"
        aria-hidden="true">在线评测
      </button>
        <br><br><br>

        <div style="padding: 20px">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">运行信息</h3>
            </div>
            <div class="panel-body" id="complieInfoDiv">
            </div>
          </div>
        </div>

        <div style="padding: 20px">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">运行结果</h3>
            </div>
            <div class="panel-body" id="resultDiv">

            </div>
          </div>
        </div>
        <div style="padding: 20px">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">通过率</h3>
            </div>
            <div class="panel-body" id="passInfoDiv">
            </div>
          </div>
        </div>
      </form>
    </div> -->
  </div>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/jquery.params.js"></script>
  <script src="../plugs/layui/dist/layui.js"></script>
  <script src="../js/vue.js"></script>
  <script>
    function run(){
      token = localStorage.getItem("token");
      console.log(token==null)
      if(token==null){
        alert("请先登录")
      }else{
      var id = $.query.get("id");
      language = ($("#language").val());
      // console.log(language);
      timeLimitInput = $("#timeLimitInput").text();
      memoryLimitInput = $("#memoryLimitInput").text();
      stackLimitInput = $("#stackLimitInput").text();
      
      $.ajax({
        type: "get",
        url: "http://localhost:70/devp/doProblem/run",
        headers: { token: token },
        data: {
          "language": language,
          "requestBody": $("#inputArea").val(),
          "timeLimit": timeLimitInput,
          "memoryLimit": memoryLimitInput,
          "stackLimit":stackLimitInput,
          "pid":id
        },
        success: function (result) {
         evaluating();
         layer.msg(result);
         $("#passInfoDiv").html("<br>通过率："+result );

        }
      })
    }

    }


    function jsToFormData(config) {
      const formData = new FormData();
      //循环传入的值转换formData
      Object.keys(config).forEach((key) => {
        formData.append(key, config[key]);
      })
      return formData;
    }

    //formdata转对象格式
    function jsonData(formData) {
      var jsonData = {};
      formData.forEach((value, key) => jsonData[key] = value);
      return jsonData
    }

    function doSubmit() {
      language = ($("#language").val());
      console.log(language);
      timeLimitInput = $("#timeLimitInput").text();
      memoryLimitInput = $("#memoryLimitInput").text();
      $.ajax({
        type: "get",
        url: "http://localhost:70/devp/doProblem/sendProblem",
        contentType: 'application/json;charset=UTF-8',
        data: {
          "language": language,
          "requestBody": $("#inputArea").val(),
          "timeLimit": timeLimitInput,
          "memoryLimit": memoryLimitInput
        },
        success: function (result) {
          result = $.parseJSON(result)
          $.each(result, function (index, item) {
            runTime = result[index].runTime;
            status = result[index].status;
            memory = result[index].memory;
            files = result[index].files;
            // for()
            fileIds = result[index].fileIds;
          })
          // console.log(files.stderr);
          console.log(fileIds.value)
          layer.msg("运行状态:" + status);
          //设置执行信息
          $("#complieInfoDiv").html("运行耗时<微秒>：" + runTime + "<br>运行耗空间<kb>：" + memory);
          //设置执行结果
          $("#resultDiv").html("状态:" + status+"<br>错误："+files.stderr+"<br>结果："+files.stdout );
        }

      })
    }

    function evaluating() {
      token = localStorage.getItem("token");
      console.log(token==null)
      if(token==null){
        alert("请先登录")
      }else{
      var id = $.query.get("id");
      language = ($("#language").val());
      // console.log(language);
      timeLimitInput = $("#timeLimitInput").text();
      memoryLimitInput = $("#memoryLimitInput").text();
      stackLimitInput = $("#stackLimitInput").text();
      
      $.ajax({
        type: "get",
        url: "http://localhost:70/devp/doProblem/evaluating",
        headers: { token: token },
        data: {
          "language": language,
          "requestBody": $("#inputArea").val(),
          "timeLimit": timeLimitInput,
          "memoryLimit": memoryLimitInput,
          "stackLimit":stackLimitInput,
          "pid":id
        },
        success: function (result) {
          result = $.parseJSON(result)
          $.each(result, function (index, item) {
            status = result[index].status;
            error = result[index].error;
            time = result[index].time;
            memory = result[index].memory;
            runTime = result[index].runTime;
            files=result[index].files
          })
          layer.msg("运行状态:" + status);
          //设置执行信息
          $("#complieInfoDiv").html("运行耗时(微秒)：" + runTime + "<br>运行耗空间<kb>：" + memory);
          //设置执行结果
          $("#resultDiv").html("状态:" + status+"<br>错误："+files.stderr+"<br>结果："+files.stdout );
        }
      })
    }

    }

    // function timeLimitClick() {
    //   if ($("#timeLimitCheckBox").prop("checked")) {
    //     $("#timeLimitInput").show();
    //   } else {
    //     $("#timeLimitInput").hide();
    //   }
    // }

    // function argsCheckBoxClick() {
    //   if ($("#argsCheckBox").prop("checked")) {
    //     $("#argsInput").show();
    //   } else {
    //     $("#argsInput").hide();
    //   }
    // }
  </script>
  <script>



    layui.use('layedit', function () {
      var layedit = layui.layedit;
      layedit.build('demo'); //建立编辑器
    });




    layui.use('element', function () {
      var $ = layui.jquery
        , element = layui.element;
      // 123
      //触发事件
      var active = {
        tabAdd: function () {
          //新增一个Tab项
          element.tabAdd('demo', {
            title: '新选项' + (Math.random() * 1000 | 0) //用于演示
            , content: '内容' + (Math.random() * 1000 | 0)
            // 1
            , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
          })
        }
        , tabDelete: function (othis) {
          //删除指定Tab项
          element.tabDelete('demo', '44'); //删除：“商品管理”


          othis.addClass('layui-btn-disabled');
        }
        , tabChange: function () {
          //切换到指定Tab项
          element.tabChange('demo', '22'); //切换到：用户管理
        }
      };

      $('.site-demo-active').on('click', function () {
        var othis = $(this), type = othis.data('type');
        active[type] ? active[type].call(this, othis) : '';
      });

      //Hash地址的定位
      var layid = location.hash.replace(/^#test=/, '');
      element.tabChange('test', layid);

      element.on('tab(test)', function (elem) {
        location.hash = 'test=' + $(this).attr('lay-id');
      });

    });

  </script>
  <script>
    $(function () {
      getData1();
    });
    function getData1() {
      var id = $.query.get("id");
      $("#id").text(id);
      $.ajax({
        type: 'get',
        url: 'http://localhost:70/devp/doProblem/' + id,
        success: function (res) {
          var vm = new Vue({
            el: "#problemLeft",
            data: {
              id: $.parseJSON(res).id,
              pname: $.parseJSON(res).pname,
              difficulty: $.parseJSON(res).difficulty,
              good: $.parseJSON(res).good,
              description: $.parseJSON(res).description,
              hint: $.parseJSON(res).hint,
              examples: $.parseJSON(res).examples,
              tname: $.parseJSON(res).tname,
              timeLimit: $.parseJSON(res).timeLimit,
              memoryLimit: $.parseJSON(res).memoryLimit,
              stackLimit: $.parseJSON(res).stackLimit
            }
          })
        }
      })
    }
  </script>
  <script src="../js/bottom-nav.js"></script>
</body>

</html>